<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <style>
        .del {
            color: skyblue;
        }

        .edit {
            color: skyblue;
        }
    </style>

</head>

<body>
    <div class="tips">
        <a href="./regi.html">注册</a>
        <a href="./sign.html">登录</a>

    </div>
    <a href="javascript:;">百度</a>
    <div class="wrapAll w">
        <!-- 搜索框 -->
        <form class="search_bar" onsubmit="return false">
            <div class="searchBox">
                <input type="text" class="searchCon">
                <button class="searchBtn">搜索</button>
            </div>
            <div class="orderBox">
                <!-- 排序的列(column)名 (id,chinese,math,english,total) -->
                <div class="orderColBox">
                    <label>
                        学号
                        <input type="radio" checked name="orderCol" class="orderCol" value="id">
                    </label>
                    <label>
                        语文
                        <input type="radio" name="orderCol" class="orderCol" value="chinese">
                    </label>
                    <label>
                        数学
                        <input type="radio" name="orderCol" class="orderCol" value="math">
                    </label>
                    <label>
                        英语
                        <input type="radio" name="orderCol" class="orderCol" value="english">
                    </label>
                    <label>
                        总分
                        <input type="radio" name="orderCol" class="orderCol" value="total">
                    </label>
                </div>
                <!-- 排序的类型  升序 / 降序 -->
                <div class="orderTypeBox">
                    <label>
                        升序
                        <input type="radio" checked name="orderType" class="orderType" value="asc">
                    </label>
                    <label>
                        降序
                        <input type="radio" name="orderType" class="orderType" value="desc">
                    </label>
                </div>
                <div class="showNumBox">
                    <select class="select">
                        <option value="5" selected>每页显示05条</option>
                        <option value="10">每页显示10条</option>
                        <option value="15">每页显示15条</option>
                        <option value="20">每页显示20条</option>
                    </select>
                </div>
                <input type="reset" class="resetBtn" value="重置">
            </div>
        </form>
        <!-- 表格 -->
        <div class="wrapTable">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="pageBox">
            <button class="prev">上一页</button>
            <span class="pageTips">1/10</span>
            <button class="next">下一页</button>
        </div>
    </div>

    <div class="shadow">
        <form class="detail" action="" autocomplete="off" onsubmit="return false">
            <p><label>编号:<input type="text" name="id" disabled></label></p>
            <p><label>姓名:<input type="text" name="name" disabled></label></p>
            <p><label>班级:<input type="text" name="class" disabled></label></p>
            <p><label>语文:<input type="text" name="chinese"></label></p>
            <p><label>数学:<input type="text" name="math"></label></p>
            <p><label>英语:<input type="text" name="english"></label></p>
            <p><button class="subBtn">确定</button><button class="canBtn">取消</button></p>
        </form>
    </div>

</body>
<script>
    var cookie = document.cookie;
    var pageBox = document.querySelector(".pageBox");
    var pageTips = document.querySelector(".pageTips")
    var tips = document.querySelector(".tips");
    var tbody = document.querySelector(".wrapTable tbody");
    var searchBtn = document.querySelector(".searchBtn");//搜索按钮
    var searchCon = document.querySelector(".searchCon");//搜索框
    var searchConIpt = ""//用来装搜索框的value值
    var shadow = document.querySelector(".shadow");
    var detailf = document.querySelector(".detail");
    var subBtn = document.querySelector(".subBtn");
    var canBtn = document.querySelector(".canBtn");
    var orderBox = document.querySelector(".orderBox");
    var orderTypeBox = document.querySelector(".orderTypeBox");
    var orderColBox = document.querySelector(".orderColBox");
    var search_bar = document.querySelector(".search_bar");
    var select = document.querySelector(".select");
    var selectValue = select.value;
    // var Maximum = 0;
    var page = 1;
    var pagenum = 1;
    var maxPagenum = 1;
    var key = ""
    var orderCol = "id"
    var orderType = "asc"
    if (cookie) {
        tips.innerHTML = `
        <p>欢迎您，${cookie}<button class="tipsBtn">退出</button></p>
        `
    }
    tips.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if (target.className == "tipsBtn") {

            delCookie("lgc");
        }
    }
    loadGoods();


    tbody.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        var tr = target.parentElement.parentElement;
        var id = tr.getAttribute("data-id");

        if (target.className == "del") {
            // var tr=target.
            if (confirm("点击确认删除成绩")) {

                var xhr = new XMLHttpRequest();
                xhr.open("get", `../php/deletegrap.php?id=${id}`, true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {


                        var { status, detail } = JSON.parse(xhr.responseText);
                        if (status) {

                            loadGoods();
                        }

                    }
                }

            }
        } else if (target.className == "edit") {
            shadow.style.display = "block";
            var xhr = new XMLHttpRequest();
            xhr.open("get", `../php/searchByid.php?id=${id}`, true);
            xhr.send();

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    var { status, detail, data } = JSON.parse(xhr.responseText);

                    if (status) {
                        for (var key in data) {
                            detailf[key].value = data[key];
                        }

                    }
                }
            }
        }
    }
    canBtn.onclick = function () {
        shadow.style.display = "none";
    }

    subBtn.onclick = function () {
        var id = detailf.id.value;
        var chinese = detailf.chinese.value;
        var math = detailf.math.value;
        var english = detailf.english.value;

        var xhr = new XMLHttpRequest();
        xhr.open("get", `../php/updateGradeByid.php?id=${id}&chinese=${chinese}&math=${math}&english=${english}`, true)
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var { status, detail } = JSON.parse(xhr.responseText);
                if (status) {
                    shadow.style.display = "none";
                    loadGoods();
                } else {
                    alert(detail);
                }
            }
        }
    }
    searchCon.oninput = function () {
        searchConIpt = searchCon.value;

    }

    search_bar.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className == "searchBtn") {

            searchConIpt = searchCon.value.trim();
            key = searchConIpt;
            loadGoods();
        } else if (target.className == "orderCol") {

            orderCol = target.value;
            loadGoods();
        } else if (target.className == "orderType") {

            orderType = target.value;
            loadGoods();
        }
    }


    // searchBtn.onclick = function () {
    //     ajax()
    // }

    pageBox.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className == "prev") {
            if (page > 1) {
                page--;
                loadGoods();
            } else {
                page = 1;
            }
        } else if (target.className == "next") {
            if (page < maxPagenum) {
                page++;
                loadGoods();
            } else {
                page = maxPagenum;
            }
        }
    }
    select.onchange = function () {

        selectValue = select.value;
        console.log(page);
        console.log(maxPagenum);
        if (page >= maxPagenum) {

            page = maxPagenum
            console.log(page);
        }
        loadGoods();


    }

    function loadGoods() {
        tbody.innerHTML = ``
        ajax({
            type: "get",
            url: "../php/searchGradeOrderShow.php",
            data: {
                key,
                orderCol,
                orderType,
                page,
                selectValue,

            },
            dataType: "json",
            success: function success(result) {
                var { status, datail, list, maxPage, page } = result;

                if (status) {
                    list.forEach(function ({ id, name, class: _class, chinese, math, english, total }, index) {

                        tbody.innerHTML += `
                            <tr data-id="${id}">
                             <td>${index + 1}</td>
                             <td>${name}</td>
                             <td>${_class}</td>
                             <td>${chinese}</td>
                            <td>${math}</td>
                            <td>${english}</td>
                             <td>${total.toFixed(0)}</td>
                                
                            <td><a class="edit" href="javascript:;">编辑</a></td>
                        <td><a class="del" href="javascript:;">删除</a></td>
                        </tr>
                            `
                    })

                    maxPagenum = maxPage;
                    // console.log(maxPagenum);
                    pageTips.innerHTML = `${page}/${maxPage}`
                } else {
                    tbody.innerHTML += `
                            <tr>
                        <td clospan=9>暂无数据</td>
                        </tr>
                         `
                }


            }


        });
    }


</script>

</html>